<template>
    <a-card :bordered="false">
      <a-form ref="searchFormRef" name="advanced_search" :model="searchFormState" class="ant-advanced-search-form">
        <a-row :gutter="24">
          <a-col :span="6">
            <a-form-item label="类别" name="categoryId">
              <a-select v-model:value="searchFormState.categoryId" placeholder="请选择类别">
                <a-select-option :value="item.id"
                  v-for="item in categoryIdOptions">{{ item.categoryName }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="商品名" name="goodsName">
              <a-input v-model:value="searchFormState.goodsName" placeholder="请输入商品名" />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-button type="primary" @click="table.refresh(true)">查询</a-button>
            <a-button style="margin: 0 8px" @click="reset">重置</a-button>
          </a-col>
        </a-row>
      </a-form>
      <s-table ref="table" :columns="columns" :data="loadData" :alert="options.alert.show" bordered
        :row-key="(record) => record.id" :tool-config="toolConfig" :row-selection="options.rowSelection">
        <template #operator class="table-operator">
          <a-space>
            <a-button type="primary" @click="formRef.onOpen()" v-if="hasPerm('bizGoodsAdd')">
              <template #icon><plus-outlined /></template>
              新增
            </a-button>
            <a-button type="primary" @click="addCateManageRef.onOpen()" v-if="hasPerm('bizGoodsCategoryAdd')">
              <template #icon>
                <FormOutlined />
              </template>
              分类管理
            </a-button>
            <xn-batch-delete v-if="hasPerm('bizGoodsBatchDelete')" :selectedRowKeys="selectedRowKeys"
              @batchDelete="deleteBatchBizGoods" />
          </a-space>
        </template>
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'categoryName'">
            {{ categoryIdOptions.filter(v => v.id == record.categoryId)[0].categoryName || '' }}
          </template>
          <template v-if="column.dataIndex === 'action'">
            <a-space>
              <a @click="formRef.onOpen(record)" v-if="hasPerm('bizGoodsEdit')">编辑</a>
              <a-divider type="vertical" v-if="hasPerm(['bizGoodsEdit', 'bizGoodsDelete'], 'and')" />
              <a-popconfirm title="确定要删除吗？" @confirm="deleteBizGoods(record)">
                <a-button type="link" danger size="small" v-if="hasPerm('bizGoodsDelete')">删除</a-button>
              </a-popconfirm>
            </a-space>
          </template>
        </template>
      </s-table>
    </a-card>
    <Form ref="formRef" @successful="table.refresh(true)" />
    <addCateManage ref="addCateManageRef" />
  </template>
  
  <script setup name="goods">
  import bizGoodsGoodscategoryApi from '@/api/biz/bizGoodsGoodscategoryApi'
  import tool from '@/utils/tool'
  import Form from './form.vue'
  import addCateManage from './addCateManage.vue'
  import bizGoodsApi from '@/api/biz/bizGoodsApi'
  let searchFormState = reactive({})
  // const categoryIdOptions = tool.dictList('GOODSCATEGORY')
  const categoryIdOptions = ref([])
  const searchFormRef = ref()
  const table = ref()
  const formRef = ref()
  const addCateManageRef = ref()
  const toolConfig = { refresh: true, height: true, columnSetting: true, striped: false }
  const columns = [
    {
      title: '工号',
      dataIndex: 'sortCode'
    },
    {
      title: '姓名',
      dataIndex: 'categoryName'
    },
    {
      title: '性别',
      dataIndex: 'goodsName'
    },
    {
      title: '年龄',
      dataIndex: 'cost'
    },
    {
      title: '工种',
      dataIndex: 'description'
    },
    {
      title: '技师等级',
      dataIndex: 'description'
    },
    {
      title: '手机',
      dataIndex: 'description'
    },
    {
      title: '状态',
      dataIndex: 'description'
    },
    {
      title: '描述',
      dataIndex: 'description'
    },
  ]
  // 操作栏通过权限判断是否显示
  if (hasPerm(['bizGoodsEdit', 'bizGoodsDelete'])) {
    columns.push({
      title: '操作',
      dataIndex: 'action',
      align: 'center',
      width: '150px'
    })
  }
  const selectedRowKeys = ref([])
  // 列表选择配置
  const options = {
    // columns数字类型字段加入 needTotal: true 可以勾选自动算账
    alert: {
      show: true,
      clear: () => {
        selectedRowKeys.value = ref([])
      }
    },
    rowSelection: {
      onChange: (selectedRowKey, selectedRows) => {
        selectedRowKeys.value = selectedRowKey
      }
    }
  }
  const loadData = (parameter) => {
    const searchFormParam = JSON.parse(JSON.stringify(searchFormState))
    return bizGoodsApi.bizGoodsPage(Object.assign(parameter, searchFormParam)).then((data) => {
      return data
    })
  }
  // 重置
  const reset = () => {
    searchFormRef.value.resetFields()
    table.value.refresh(true)
  }
  // 删除
  const deleteBizGoods = (record) => {
    let params = [
      {
        id: record.id
      }
    ]
    bizGoodsApi.bizGoodsDelete(params).then(() => {
      table.value.refresh(true)
    })
  }
  // 批量删除
  const deleteBatchBizGoods = (params) => {
    bizGoodsApi.bizGoodsDelete(params).then(() => {
      table.value.clearRefreshSelected()
    })
  }
  const loadCategoryData = (parameter) => {
    return bizGoodsGoodscategoryApi.bizGoodsCategoryPage(parameter).then((data) => {
      categoryIdOptions.value = data.records
    })
  }
  loadCategoryData()
  </script>
  